<template>
	<view class="page">
		<cu-custom class="w100" bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">关于我们</block>
		</cu-custom>
		
		<view class="text">
			<view>
				<view class="text-content">
					“红似火、映满山，此间之美永属你”，这是映山红最为贴切的柔情花语，也是映山红平台的最佳诠释。
				</view>
				<view class="text-title" style="margin-top:22rpx;">在这里，你只有一种身份</view>
				<view class="text-content" style="margin-top:8rpx;">
					无论身为何人，身处何地，你都将是戴村治理的主人翁。你的身份至高无上。
				</view>
				<view class="text-title" style="margin-top:28rpx;">在这里，你可有两种角色。</view>
				<view class="text-content" style="margin-top:8rpx;">
					面对丰富的镇域治理活动，你既可成为发起者，亦可择一参与其中。你的角色因你而定。
				</view>
				<view class="text-title" style="margin-top:28rpx;">在这里，你还有多种选择。</view>
				<view class="text-content" style="margin-top:8rpx;">
					环境卫生、治安巡逻、交通劝导、技能培训、登山郊游等各色活动任你挑选。你的选择由你做主。
				</view>
				<view class="text-title" style="margin-top:28rpx;">在这里，你更有丰厚回报。</view>
				<view class="text-content" style="margin-top:8rpx;">
					科学人性的积分管理体系，将为你的付出亮分定色。海量实物奖励、个性政策红利等你认领。你的回报真实可期。
				</view>
				<view class="text-content" style="margin-top:20rpx;">
					我们真诚期待你的加入，将心中的理想化为漫山的鲜红，为戴村的明天添彩亮色。
				</view>
			</view>

			<view class="text-title fr margin-top-xl" style="color: #F0F0F0;">“映山红”乡村治理数字平台</view>
		</view>
		
		<image class="about-flower-right" src="/static/user/about_flower_right.png"></image>
		<image class="about-flower-left" src="/static/user/about_flower_left.png"></image>
		<image class="about-end" mode="widthFix" src="https://xtspace.cn/xcx/sys/about.png"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.page {
		width: 100%;
		overflow-x: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background-color: #fff;
	}
	.w100 {
		width: 100%;
	}


	.text {
		padding: 0 40rpx 0 58rpx;
		z-index: 11;
	}

	.title {
		color: #597091;
		font-size: 36rpx;
		font-weight: bold;
		margin: 20rpx 0 29rpx;
		text-align: center;
	}

	.text-bottom {
		font-weight: bold;
		font-size: 32rpx;
		color: #fff;
	}

	.text-bottom view:first-child {
		position: absolute;
		right: 40rpx;
		bottom: 88rpx;
	}

	.text-bottom view:last-child {
		position: absolute;
		right: 126rpx;
		bottom: 40rpx;
	}

	.text-bottom.iphone view:first-child {
		bottom: 200rpx;
	}

	.text-bottom.iphone view:last-child {
		bottom: 150rpx;
	}

	.text-title {
		color: #597091;
		font-weight: bold;
		font-size: 34rpx;
	}

	.text-content,
	.convention-content {
		font-size: 32rpx;
		color: #555;
	}

	.text-content:first-child {
		margin-top: 40rpx;
	}

	.convention-content {
		margin-bottom: 47rpx;
	}

	.about-body>image {
		width: 383rpx;
		height: 345rpx;
	}

	.about-flower-right {
		top: 141rpx;
		position: absolute;
		right: 0;
		width: 242rpx;
		height: 442rpx;
	}

	.about-flower-left {
		position: absolute;
		top: 519rpx;
		left: 0;
		width: 193rpx;
		height: 302rpx;
	}

	.about-end {
		position: absolute;
		bottom: 0;
		width: 100vw;
		opacity: 0.8;
	}

	.trial {
		padding-bottom: 165rpx;
	}

	.trialIphone {
		padding-bottom: 360rpx;
	}
</style>
